<template>
  <div>
    <div class="my-3"
         v-if="step===1">
      <input placeholder="请输入原密码"
             v-model="oldPassword"
             type="password"
             class="input mb-3" />

      <vm-button text="下一步"
                 @buttonClicked="goNext"></vm-button>
    </div>

    <div class="my-3"
         v-if="step===2">
      <input placeholder="请输入新密码"
             v-model="newPassword"
             type="password"
             class="input mb-3" />

      <input placeholder="请再次输入新密码"
             v-model="newPasswordCheck"
             type="password"
             class="input mb-3" />

      <vm-button text="确认修改"
                 @buttonClicked="submit"></vm-button>
    </div>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'

export default {
  components: {
    VmButton
  },
  props: {},
  data() {
    return {
      step: 1,
      oldPassword: '',
      newPassword: '',
      newPasswordCheck: ''
    }
  },
  computed: {},
  watch: {},
  created() { },
  methods: {
    goNext() {
      if (!this.oldPassword) {
        return this.$notice.toast({ message: '请输入原密码' })
      }
      this.$http({
        method: 'GET',
        name: 'auth.user.checkpwd',
        data: {
          oldPassword: this.oldPassword
        },
        errorMsg: '密码错误，请重新输入'
      }).then(res => {
        if (+res === 1) {
          this.step++
        } else {
          this.$notice.toast({ message: '密码错误，请重新输入' })
        }
      })
    },
    submit() {
      if (!this.newPassword) {
        return this.$notice.toast({ message: '请输入新密码' })
      }
      if (this.newPassword !== this.newPasswordCheck) {
        return this.$notice.toast({ message: '两次密码不一致' })
      }
      this.$http({
        method: 'PUT',
        name: 'auth.user.password',
        params: {
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        },
        errorMsg: '密码修改失败'
      }).then(res => {
        if (+res === 1) {
          this.$notice.toast({ message: '密码修改成功' })
          this.$router.back({})
        } else {
          this.$notice.toast({ message: '密码修改失败' })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mt-3 {
  margin-top: 30px;
}
.mb-3 {
  margin-bottom: 30px;
}
.my-3 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.input {
  height: 100px;
  padding-left: 30px;
  padding-right: 30px;
  flex: 1;
  background-color: #fff;
  border-top-width: 1px;
  border-top-color: #ddd;
  border-bottom-width: 1px;
  border-bottom-color: #ddd;
  tint-color: #999;
}
</style>
